<template>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="姓名">
        <a-input
          v-model="form.name"
          @blur="
            () => {
              $refs.name.onFieldBlur();
            }
          "
        />
      </a-form-model-item>
      <a-form-model-item label="微信" >
        <a-input v-model="form.region" placeholder="请输入">
          
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="电话" required >
        <a-input  v-model="form.region" placeholder="请输入">
        </a-input >
        
      </a-form-model-item>
     
      <a-form-model-item label="QQ" required>
        <a-input v-model="form.region" placeholder="请输入">
        </a-input>

      </a-form-model-item>
      <a-form-model-item label="邮箱" required >
        <a-input v-model="form.region" placeholder="请输入">
        </a-input>

      </a-form-model-item>
      
    </a-form-model>
  </template>
  <script>
  export default {
    data() {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          name: '',
          region: undefined,
          date1: undefined,
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
          ],
          region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
          date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
          type: [
            {
              type: 'array',
              required: true,
              message: 'Please select at least one activity type',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: 'Please select activity resource', trigger: 'change' },
          ],
          desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
        },
      };
    },
    methods: {
      onSubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
    },
  };
  </script>
  